import React, { useEffect, useState } from "react";
import {
  asyncGetCategory1List,
  asyncGetCategory2List,
  asyncGetCategory3List,
  setCategory3Id
} from "@/app/slices/categorySlice";
import { useAppDispatch } from "@/app/hooks";

import { CategoryDataList } from "@/api/product/model/categoryType";
import { Card, Form, Select } from "antd";
import { store } from "@/app/store";
import { useForm } from "antd/lib/form/Form";
import { useSelector } from "react-redux";

export default function Category() {
  let dispatch = useAppDispatch();
  let [category1Lista, setCategory1List] = useState<CategoryDataList>([]);
  let [category2Lista, setCategory2List] = useState<CategoryDataList>([]);
  let [category3Lista, setCategory3List] = useState<CategoryDataList>([]);
  let [form] = useForm();

  let { category1List,category2List,category3List} = useSelector(
    (state: any) => state.category
  );
  const getCategory1List = async () => {
    await dispatch(asyncGetCategory1List());
    setCategory1List(category1List);
  };

  useEffect(() => {
    getCategory1List();
  }, []);

  // 当你点击的时候
  const getCategory2List = async (c1Id: number) => {
    console.log(c1Id);
    // setCategory2List([]);
    // setCategory3List([]);
    // setCategory1Id(c1Id)
    form.setFieldsValue({ category2: undefined, category3: undefined });
    await dispatch(asyncGetCategory2List(c1Id));
    // let us = store.getState().category.category2List;
    setCategory2List(category2List);
  };

  const getCategory3List = async (c2Id: number) => {
    console.log(c2Id);
    // setCategory3List([]);
    // setCategory2Id(c2Id)
    form.setFieldsValue({ category3: undefined });
    await dispatch(asyncGetCategory3List(c2Id));
    // let us = store.getState().category.category3List;
    setCategory3List(category3List);
  };

  const setCategory = (ca3 : number)=>{
    dispatch(setCategory3Id(ca3))
  }
  return (
    <>
      <Card  style={{width:"98%" , margin : "0 auto"}}>
        <Form form={form} layout="inline">
          <Form.Item label="一级分类" className="ml10">
            <Select onChange={getCategory2List} style={{ width: 200 }} placeholder={"请选择"}>
              {category1List?.map((ca : any) => (
                <Select.Option value={ca.id} key={ca.id}>
                  {ca.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="二级分类" name="category2">
            <Select onChange={getCategory3List} style={{ width: 200 }} placeholder={"请选择"}>
              {category2List?.map((ca2:any) => (
                <Select.Option value={ca2.id} key={ca2.id}>
                  {ca2.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="三级分类" name="category3">
            <Select style={{ width: 200 }} onChange={setCategory} placeholder={"请选择"}>
              {category3List?.map((ca3:any) => (
                <Select.Option value={ca3.id} key={ca3.id}>
                  {ca3.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>
        </Form>
      </Card>
    </>
  );
}
